---
layout: './_Examples.astro'
---
export { getStaticPaths } from '@/lib/framework'
import { DemoTitle } from '@/components/Demo'
import Activity from './_Activity/index.astro'
import Slider from './_Slider/index.astro'
import Input from './_Input/index.astro'
import Countdown from './_Countdown/index.astro'
import Heading from '@/components/Heading.astro';
import Match from '@/components/Match.astro';
import Code from '@/components/Code.astro';
import Link from '@/components/Link.astro'
import Note from '@/components/Note.astro'
import Pre from '@/components/Pre.astro'
import Motion from './_Motion/index.astro'
export const components = {a: Link, pre: Pre}

<Heading class="sr-only" value="Input" />

<Input rootClassName="!mt-0" />

<Heading value="Activity" />

<Activity />

<Heading value="Slider" />

<Slider />

<Heading value="Countdown" />

<Countdown />

<Match react>
    <Heading value="Motion for React" />

    NumberFlow was designed to work with [Motion's layout animations](https://motion.dev/docs/react-layout-animations).
    You can use a `{ type: 'spring', duration: 0.9, bounce: 0 }` transition to match NumberFlow's default transform timing:

    <Motion />

    <Note>
    When NumberFlow is used within a layout animation it should be (or be in) a
    [`motion` component](https://motion.dev/docs/react-motion-component) with the
    `layout layoutRoot` props.
    </Note>
</Match>
